<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div>
    <canvas id="c" width="800px" height="600px" style="border: #2b2b2b 1px solid">

    </canvas>

    <script type="text/javascript">
        (()=>{
            const canvas = document.getElementById("c");
            var ctx=canvas.getContext("2d");

            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.lineTo(200,200);
            ctx.lineTo(50,250);
            ctx.lineTo(300,150);
            ctx.closePath();

            ctx.strokeStyle='blue';
            ctx.stroke();

            ctx.fillStyle='red';
            ctx.fill();
        })()

        function cls_can(){
            let canvas=document.getElementById('c');
            let ctx=canvas.getContext('2d');
            ctx.clearRect(0,0,800,600);
        }
    </script>

</div>

</body>
</html>